// components/OrderCard/OrderCard.ts
Component({
  properties: {
    type: {
      type: String,
      value: "default",
    },
    orderNo: {
      type: String,
      value: "",
    },
    orderTime: {
      type: String,
      value: "",
    },
    address: {
      type: String,
      value: "",
    },
    weight: {
      type: String,
      value: "",
    },
    tags: {
      type: Array, // 数组类型，例如 ['纸板', '塑料']
      value: [],
    },
    remark: {
      type: String,
      value: "",
    },
    imgs: {
      type: Array,
      value: [],
    },
    // 滑动按钮初始文本
    sliderInitialText: {
      type: String,
      value: "滑动接单",
    },
    // 滑动成功后的文本
    sliderSuccessText: {
      type: String,
      value: "2024/12/25", // 示例值
    },
  },

  data: {
    // 滑动相关数据
    sliderLeft: 0, // 滑动小方块的当前x轴偏移量
    sliderWidth: 0, // 滑动小方块的宽度
    containerWidth: 0, // 滑动轨道的总宽度
    startPageX: 0, // 触摸开始时的页面X坐标
    startSliderLeft: 0, // 触摸开始时sliderLeft的值
    isSliding: false, // 是否正在滑动
    isSliderCompleted: false, // 是否已经滑动完成
    activeTrackWidth: 0, // 滑动过程中轨道变色的宽度
  },

  lifetimes: {
    ready() {
      if (this.data.type === "default") {
        this.getSliderDimensions();
      }
    },
  },

  methods: {
    privew() {
      wx.previewImage({
        urls: this.data.imgs,
        showmenu: false
      });
    },
    /**
     * 获取滑动组件的尺寸
     */
    getSliderDimensions() {
      if (this.data.type !== "default") return;
      const query = wx.createSelectorQuery().in(this);
      query
        .select(".slider-container")
        .boundingClientRect((res) => {
          if (res) {
            this.setData({
              containerWidth: res.width,
            });
          }
        })
        .exec();

      query
        .select(".slider-handle")
        .boundingClientRect((res) => {
          if (res) {
            this.setData({
              sliderWidth: res.width + 10,
            });
          }
        })
        .exec();
    },

    /**
     * 联系按钮点击事件
     */
    onContactTap() {
      this.triggerEvent("contact");
    },
    /**
     * 转单按钮点击事件
     */
    onTransferTap() {
      this.triggerEvent("transfer");
    },
    /**
     * 立即处理按钮点击事件
     */
    onResolveTap() {
      this.triggerEvent("resolve");
    },
    /**
     * 滑动小方块触摸开始
     * @param e TouchEvent
     */
    handleSliderTouchStart(e: WechatMiniprogram.TouchEvent) {
      if (this.data.isSliderCompleted) return; // 完成后不再响应滑动

      this.setData({
        startPageX: e.touches[0].pageX,
        startSliderLeft: this.data.sliderLeft,
        isSliding: true,
      });
    },

    /**
     * 滑动小方块触摸移动
     * @param e TouchEvent
     */
    handleSliderTouchMove(e: WechatMiniprogram.TouchEvent) {
      if (!this.data.isSliding || this.data.isSliderCompleted) return;

      const deltaX = e.touches[0].pageX - this.data.startPageX;
      let newLeft = this.data.startSliderLeft + deltaX;

      // 限制滑动范围
      const maxLeft = this.data.containerWidth - this.data.sliderWidth;
      newLeft = Math.max(0, Math.min(newLeft, maxLeft));

      // 更新滑动条位置
      this.setData({
        sliderLeft: newLeft,
        activeTrackWidth: newLeft + this.data.sliderWidth / 2, // 让小方块中心点作为进度计算基准
      });
      // console.log('Touch Move:', newLeft);
    },

    /**
     * 滑动小方块触摸结束
     * @param e TouchEvent
     */
    handleSliderTouchEnd(e: WechatMiniprogram.TouchEvent) {
      if (!this.data.isSliding || this.data.isSliderCompleted) return;

      const maxLeft = this.data.containerWidth - this.data.sliderWidth;
      // 设置一个触发阈值，例如达到总滑动距离的90%
      const triggerThreshold = maxLeft * 0.9;

      if (this.data.sliderLeft >= triggerThreshold) {
        // 滑动成功
        this.setData({
          sliderLeft: maxLeft, // 动画到最右边
          isSliderCompleted: true,
          activeTrackWidth: this.data.containerWidth, // 轨道充满
        });
        this.triggerEvent("accept"); // 触发接单事件
        console.log("滑动接单成功！");
      } else {
        // 未达到阈值，弹回原位
        this.setData({
          sliderLeft: 0, // 动画回原位
          isSliderCompleted: false,
          activeTrackWidth: 0, // 轨道恢复
        });
        console.log("滑动未完成，弹回。");
      }

      this.setData({
        isSliding: false,
      });
    },
  },
});
